Design responsive

S'adapter à tous les écrans

DSP - USAL33

Qu'est-ce que le responsive ?

Une page responsive s'adapte à la taille de l'écran : mobile, tablette, ordinateur.

Piliers :

  • Media queries (points de rupture)
  • Unités relatives (%, rem, vw…)
  • Images flexibles
  • Mise en page fluide (Flexbox / Grid)

La balise meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Indispensable dans le <head> : sans elle, le mobile simule un écran large et dézoome la page.

Media queries

/* Styles de base (mobile d'abord) */

@media (min-width: 768px) {
    /* Tablette et plus */
}

@media (min-width: 1024px) {
    /* Ordinateur */
}

Mobile-first

On écrit d'abord pour le mobile, puis on enrichit vers le grand écran.

.container { flex-direction: column; }   /* mobile */

@media (min-width: 768px) {
    .container { flex-direction: row; }   /* desktop */
}

Avantages : performance mobile, code plus simple, progression naturelle.

Points de rupture courants

Appareil Largeur
Mobile < 768px
Tablette 768px – 1024px
Ordinateur > 1024px

💡 Choisir les breakpoints selon le contenu, pas selon des appareils précis.

Exemple : navigation responsive

.nav { display: flex; flex-direction: column; }

@media (min-width: 768px) {
    .nav { flex-direction: row; gap: 2rem; }
}

Menu empilé sur mobile, en ligne sur grand écran.

Exemple : grille responsive

.grid {
    display: grid;
    grid-template-columns: 1fr;            /* mobile : 1 colonne */
}
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}

Ou, sans media query : repeat(auto-fit, minmax(200px, 1fr)).

Unités relatives

Unité Référence
% Élément parent
em Taille de police du parent
rem Taille de police racine
vw / vh Largeur / hauteur de la fenêtre

💡 Préférer rem pour les tailles de texte (cohérence et accessibilité).

Images responsives

img {
    max-width: 100%;
    height: auto;
}

Aller plus loin : srcset pour servir des images adaptées à la résolution.

Masquer/afficher selon l'écran

.mobile-only  { display: block; }
.desktop-only { display: none; }

@media (min-width: 768px) {
    .mobile-only  { display: none; }
    .desktop-only { display: block; }
}

⚠️ À utiliser avec parcimonie (le contenu doit rester accessible).

Exercice : galerie responsive

Réaliser une galerie qui affiche :

  • 1 colonne sur mobile
  • 2 colonnes sur tablette
  • 4 colonnes sur ordinateur
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}